<template>
  <div class="box w-[100%]">
    <div class="flex-center-center absolute-center">
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img :src="vueImg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    {{ double }}
    <HelloWorld msg="Vite + Vue" />
  </div>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/store/modules/dome'
import vueImg from '@/assets/vue.svg'
import { assign } from 'fair-wing'

const store = useCounterStore()
const double = computedAsync(() => store.double)
const a = { a: 1, b: 2 }
const b = { b: assign.delete }
const c = assign({}, a, b)
console.log(c)
</script>
<style scoped lang="scss">
.box {
  color: $myScssColor;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
<route lang="json">
{
  "meta": {
    "title": "test",
    "layout": "headers"
  }
}
</route>
